<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="home/iconfont.css" type="text/css"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
            overflow: hidden;
        }

        .bg {
            width: 100%;
            height: 500px;
            background: #02030d;
            /*background: white;*/
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg .bg-inner {
            width: 50%;
            min-width: 768px;
            height: 100%;
        }

        .bg .bg-inner .title {
            text-align: center;
            background: linear-gradient(to bottom, #198bbf, #214d68 90%);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
            font-size: 32px;
            line-height: 2;
        }

        .bg-inner .show-draw {
            width: 100%;
            min-width: 768px;
            height: calc(100% - 100px);
            position: relative;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .draw {
            width: 70%;
            height: 100%;
            float: left;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .show {
            width: 30%;
            height: 100%;
            float: left;
            position: absolute;
            left: 85%;
        }

        .bg-inner .btn-group {
            width: 100%;
            text-align: center;
        }

        .bg-inner .btn-group .btn-shell {
            display: inline-block;
            overflow: hidden;
        }

        .bg-inner .btn-group .btn-shell:not(:last-child) {
            margin-right: 20px;
        }

        .bg-inner .btn-group .btn {
            font-size: 16px;
            padding: 5px 25px;
            text-align: center;
            display: inline-block;
            background: #259af7;
            cursor: pointer;
            transform: skewX(-45deg);
        }

        .bg-inner .btn-group .btn .btn-name {
            font-size: 16px;
            text-align: center;
            display: block;
            background: #259af7;
            color: #FFF;
            line-height: 1.5;
            transform: skewX(45deg);
        }

        .bg-inner .show-draw .draw .draw_center {
            width: 300px;
            height: 300px;
            float: left;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .draw .draw_side {
            width: calc((100% - 300px) / 2);
            max-width: 118px;
            height: 300px;
            line-height: 300px;
            float: left;
            color: #0c53be;
            text-align: center;
            position: relative;
        }

        .bg-inner .show-draw .draw .draw_side .icon {
            font-size: 118px;
            display: block;
        }

        .bg-inner .show-draw .draw .draw_side .icon.left_circle,
        .bg-inner .show-draw .draw .draw_side .icon.right_circle {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 118px;
        }

        .bg-inner .show-draw .draw .draw_side .icon.left_circle.circle_left {
            animation-name: circle-left;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        .bg-inner .show-draw .draw .draw_side .icon.right_circle.circle_right {
            animation-name: circle-right;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes circle-left {
            0% {
                color: #0c53be;
                font-size: 118px;
            }
            25% {
                color: rgba(12, 83, 190, 0.51);
                left: 46px;
                font-size: 70px;
            }
            50% {
                color: rgba(12, 83, 190, 0);
                left: 140px;
                font-size: 92px;
            }
            70% {
                color: rgba(12, 83, 190, 0);
                left: 140px;
                font-size: 92px;
            }
            100% {
                color: rgba(12, 83, 190, 0);
                left: 140px;
                font-size: 92px;
            }
        }

        @keyframes circle-right {
            0% {
                color: #0c53be;
                font-size: 118px;
            }
            25% {
                color: rgba(12, 83, 190, 0.51);
                left: -46px;
                font-size: 70px;
            }
            50% {
                color: rgba(12, 83, 190, 0);
                left: -140px;
                font-size: 92px;
            }
            70% {
                color: rgba(12, 83, 190, 0);
                left: -140px;
                font-size: 92px;
            }
            100% {
                color: rgba(12, 83, 190, 0);
                left: -140px;
                font-size: 92px;
            }
        }

        /*效果*/
        .load-outer {
            width: 100%;
            height: 100%;
            z-index: 1;
            border: 3px solid #042044;
            border-radius: 300px;
            box-shadow: 0 0 30px 0 #001c3f inset;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .load-outer.shiney {
            animation-name: shiney;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        .load-outer.shiney-rare {
            animation-name: shiney-rare;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney {
            0% {
                width: 100%;
                height: 100%;
                transform: rotate(0deg);
            }
            25% {
                width: 97%;
                height: 97%;
                transform: rotate(45deg);
            }
            50% {
                width: 95%;
                height: 95%;
                transform: rotate(90deg);
            }
            70% {
                width: 97%;
                height: 97%;
                transform: rotate(180deg);
            }
            100% {
                width: 100%;
                height: 100%;
                transform: rotate(360deg);
            }
        }

        @keyframes shiney-rare {
            0% {
                width: 100%;
                height: 100%;
                transform: rotate(0deg);
            }
            25% {
                width: 97%;
                height: 97%;
                transform: rotate(45deg);
            }
            50% {
                width: 95%;
                height: 95%;
                transform: rotate(90deg);
                border-radius: 300px;
                box-shadow: 0 0 30px 0 #001c3f inset;
            }
            70% {
                width: 97%;
                height: 97%;
                transform: rotate(180deg);
                border: 3px solid goldenrod;
                box-shadow: 0 0 30px 0 goldenrod inset;
            }
            100% {
                width: 100%;
                height: 100%;
                transform: rotate(360deg);
            }
        }

        .load-inner {
            width: 84.210526%;
            height: 84.210526%;
            z-index: 2;
            /*border: 5px solid #0098f7;*/
            border-radius: 300px;
            box-shadow: 0 0 40px 0 #0098f7 inset;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .load-inner .inner-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            transform: rotate(-45deg);
        }

        .load-inner .inner-circle-left {
            border-radius: 300px 0 0 300px;
            border-left: 5px solid #0098f7;
        }

        .load-outer .inner-circle-left.circle-left-round {
            animation-name: circle-left-round;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes circle-left-round {
            0% {
                border-left: 20px solid #0098f7;
            }
            25% {
                border-left: 12.5px solid #0098f7;
            }
            50% {
                border-left: 5px solid #0098f7;
            }
            70% {
                border-left: 5px solid #0098f7;
            }
            100% {
                border-left: 5px solid #0098f7;
            }
        }

        .load-outer .inner-circle-left.circle-left-round-rare {
            animation-name: circle-left-round-rare;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes circle-left-round-rare {
            0% {
                border-left: 20px solid #0098f7;
            }
            25% {
                border-left: 12.5px solid #0098f7;
            }
            50% {
                border-left: 5px solid #0098f7;
            }
            70% {
                border-left: 5px solid gold;
            }
            100% {
                border-left: 5px solid gold;
            }
        }

        .load-inner .inner-circle-right {
            border-radius: 0 300px 300px 0;
            border-right: 5px solid #0c53be;
        }

        .load-outer .inner-circle-right.circle-right-round {
            animation-name: circle-right-round;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes circle-right-round {
            0% {
                border-right: 20px solid #0c53be;
            }
            25% {
                border-right: 12.5px solid #0c53be;
            }
            50% {
                border-right: 5px solid #0c53be;
            }
            70% {
                border-right: 5px solid #0c53be;
            }
            100% {
                border-right: 5px solid #0c53be;
            }
        }

        /* TODO  修改稀有的颜色渐变*/
        .load-outer .inner-circle-right.circle-right-round-rare {
            animation-name: circle-right-round-rare;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes circle-right-round-rare {
            0% {
                border-right: 20px solid #0c53be;
            }
            25% {
                border-right: 12.5px solid #0c53be;
            }
            50% {
                border-right: 5px solid #0c53be;
            }
            70% {
                border-right: 5px solid goldenrod;
            }
            100% {
                border-right: 5px solid goldenrod;
            }
        }

        .load-inner.shiney-inner {
            animation-name: shiney-inner;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        .load-inner.shiney-inner-rare {
            animation-name: shiney-inner-rare;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney-inner {
            0% {
                width: 35%;
                height: 35%;
                transform: rotate(0deg);
                background: #FFF;
            }
            25% {
                width: 47.25%;
                height: 47.25%;
                transform: rotate(90deg);
            }
            50% {
                width: 59.5%;
                height: 59.5%;
                transform: rotate(180deg);
            }
            70% {
                width: 71.85%;
                height: 71.85%;
                transform: rotate(240deg);
            }
            90% {
                width: 84.210526%;
                height: 84.210526%;
                transform: rotate(300deg);
            }
            100% {
                width: 84.210526%;
                height: 84.210526%;
                transform: rotate(360deg);
            }
        }

        @keyframes shiney-inner-rare {
            0% {
                width: 35%;
                height: 35%;
                transform: rotate(0deg);
                background: #FFF;
            }
            25% {
                width: 47.25%;
                height: 47.25%;
                transform: rotate(90deg);
            }
            50% {
                width: 59.5%;
                height: 59.5%;
                transform: rotate(180deg);
                box-shadow: 0 0 40px 0 #0098f7 inset;
            }
            70% {
                width: 71.85%;
                height: 71.85%;
                transform: rotate(240deg);
                box-shadow: 0 0 40px 0 gold inset;
            }
            90% {
                width: 84.210526%;
                height: 84.210526%;
                transform: rotate(300deg);
            }
            100% {
                width: 84.210526%;
                height: 84.210526%;
                transform: rotate(360deg);
            }
        }

        .gift {
            width: 80%;
            height: 80%;
            display: none;
        }

        .gift-span {
            display: block;
            width: 100%;
            height: 80%;
        }

        .gift-span .gift-img {
            width: 100%;
            height: 100%;
        }

        .gift-title {
            display: block;
            width: 100%;
            height: 20%;
            color: gold;
            text-align: center;
            font-size: .9rem;
            line-height: .9rem;
        }

        .animate-stop {
            animation-play-state: paused;
        }

        .animate-run {
            animation-play-state: running;
        }


    </style>
</head>
<body>
<div id="container">
    <div class="bg">
        <div class="bg-inner">
            <h1 class="title">/恭喜你获得/</h1>
            <div class="show-draw">
                <div class="draw">
                    <span class="draw_side left_side">
                        <span class="icon iconfont">&#xe624;</span>
                        <span class="icon iconfont left_circle">&#xe624;</span>
                    </span>
                    <div class="draw_center">
                        <div class="load-outer">
                            <div class="load-inner">
                                <div class="inner-circle inner-circle-left"></div>
                                <div class="inner-circle inner-circle-right"></div>
                                <div class="gift">
                                    <span class="gift-span"><img class="gift-img" src="dog.png"/></span>
                                    <span class="gift-title">神兽坐骑(永久)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="draw-gift">

                    </div>
                    <span class="draw_side right_side">
                        <span class="icon iconfont">&#xe62e;</span>
                        <span class="icon iconfont right_circle">&#xe62e;</span>
                    </span>
                </div>
                <div class="show">

                </div>
            </div>
            <div class="btn-group">
                <span class="btn-shell">
                    <span class="btn" onclick="openOne()">
                        <span class="btn-name">开启一个</span>
                    </span>
                </span>
                <span class="btn-shell">
                    <span class="btn" onclick="openAll()">
                        <span class="btn-name">开启全部</span>
                    </span>
                </span>
                <span class="btn-shell">
                    <span class="btn" onclick="stopOpen()">
                        <span class="btn-name">停止</span>
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>
<script>

    /**
     * 奖池: ss
     *
     */
    let GIFT = [
        {id: "a", gift: "百炼钢管", deadline: true, expiry: 1000 * 60 * 60},
        {id: "b", gift: "幽冥鬼爪", deadline: true, expiry: 1000 * 60 * 60},
        {id: "c", gift: "95式步枪", deadline: true, expiry: 1000 * 60 * 60 * 2},
        {id: "d", gift: "07式霰弹枪", deadline: true, expiry: 1000 * 60 * 60 * 3},
        {id: "e", gift: "50折扣券", deadline: true, expiry: 1000 * 60 * 60 * 3},
        {id: "f", gift: "罗非鱼", deadline: true, expiry: 1000 * 60 * 60 * 5},
        {id: "g", gift: "死神变身卡", deadline: true, expiry: 1000 * 60 * 60 * 8},
        {id: "f", gift: "黑铁之臂", deadline: true, expiry: 1000 * 60 * 60 * 24},
        {id: "i", gift: "阿兹卡步枪", deadline: true, expiry: 1000 * 60 * 60 * 12},
        {id: "j", gift: "风暴战斧", deadline: true, expiry: 1000 * 60 * 60 * 24 * 3},
        {id: "k", gift: "飓风之锤", deadline: true, expiry: 1000 * 60 * 60 * 24 * 15},
        {id: "l", gift: "死神猎手", deadline: true, expiry: 1000 * 60 * 60 * 24 * 30},
        {id: "m", gift: "神秘礼品", deadline: false, expiry: "forever"},
        {id: "n", gift: "神秘礼物", deadline: false, expiry: "forever"}
    ], INTERVAL;


    /**
     * 扩展JQuery
     */
    $.extend({});

    let lottery = function () {
        // 没箱子了就停止
        // clearInterval(INTERVAL);
        changeChaos();
        rare();
        /*let random = Math.random() * 10;
        if (random < 1) {
            rare();
        } else {
            normal();
        }*/
        return lottery;
    };


    /**
     * 抽奖
     */
    function openOne() {
        lottery();
    }

    /**
     * 抽奖
     */
    function openAll() {
        let i = 0;
        INTERVAL = setInterval(lottery(), 1000);
    }

    /**
     * 停止抽奖
     */
    function stopOpen() {
        if (INTERVAL) {
            clearInterval(INTERVAL);
            $(".load-outer").addClass("animate-stop");
            $(".load-inner").addClass("animate-stop");
            let $circleLeft = $(".inner-circle-left");
            let $circleRight = $(".inner-circle-right");
            $circleLeft.addClass("animate-stop");
            $circleRight.addClass("animate-stop");
        }
    }

    /**
     * 普通特效
     */
    function normal() {
        let $outer = $(".load-outer");
        let $inner = $(".load-inner");
        let $left = $(".left_circle");
        let $right = $(".right_circle");
        let $circleLeft = $(".inner-circle-left");
        let $circleRight = $(".inner-circle-right");
        $left.addClass("circle_left");
        $right.addClass("circle_right");
        $circleLeft.addClass("circle-left-round");
        $circleRight.addClass("circle-right-round");
        $outer.addClass("shiney");
        $inner.addClass("shiney-inner");
        setTimeout(function () {
            $left.removeClass("circle_left");
            $right.removeClass("circle_right");
            $circleLeft.removeClass("circle-left-round");
            $circleRight.removeClass("circle-right-round");
            $outer.removeClass("shiney");
            $inner.removeClass("shiney-inner");
            $outer.css({"border": "3px solid #042044", "box-shadow": "0 0 30px 0 #042044 inset"});
            /*"border": "5px solid #0098f7",*/
            $inner.css({"box-shadow": "0 0 40px 0 #0098f7 inset"});
            $(".gift").css("display", "block");
            $(".gift .gift-title").css("color", "#FFF");
        }, 500);
    }


    /**
     * 极品特效
     */
    function rare() {
        let $outer = $(".load-outer");
        let $inner = $(".load-inner");
        let $circleLeft = $(".inner-circle-left");
        let $circleRight = $(".inner-circle-right");
        let $left = $(".left_circle");
        let $right = $(".right_circle");
        $left.addClass("circle_left");
        $right.addClass("circle_right");
        $circleLeft.addClass("circle-left-round-rare");
        $circleRight.addClass("circle-right-round-rare");
        $outer.addClass("shiney-rare");
        $inner.addClass("shiney-inner-rare");
        setTimeout(function () {
            $left.removeClass("circle_left");
            $right.removeClass("circle_right");
            $circleLeft.removeClass("circle-left-round-rare");
            $circleRight.removeClass("circle-right-round-rare");
            $outer.removeClass("shiney-rare");
            $inner.removeClass("shiney-inner-rare");
            $circleLeft.css("border-left", "5px solid gold");
            $circleRight.css("border-right", "5px solid goldenrod");
            $outer.css({"border": "3px solid goldenrod", "box-shadow": "0 0 30px 0 goldenrod inset"});
            /*"border": "5px solid gold",*/
            $inner.css({"box-shadow": "0 0 40px 0 gold inset"});
            $(".gift").css("display", "block");
            $(".gift .gift-title").css("color", "gold");
        }, 500);
    }


    /**
     * 修改到初始化前
     */
    function changeChaos() {
        $(".gift").css("display", "none");
        $(".load-outer").css({
            "border": "3px solid #042044",
            "box-shadow": "0 0 30px 0 #042044 inset"
        }).addClass("animate-run");
        $(".load-inner").css({
            "box-shadow": "0 0 40px 0 #0098f7 inset"
        }).addClass("animate-run");
        let $circleLeft = $(".inner-circle-left");
        let $circleRight = $(".inner-circle-right");
        $circleLeft.css("border-left", "5px solid #0098f7").addClass("animate-run");
        $circleRight.css("border-right", "5px solid #0c53be").addClass("animate-run");
    }


</script>

</body>
</html>
